<template>
  <transition enter-active-class="animate__animated animate__bounceInUp">
    <div class="player" v-if="$root.musicStore.musicID">
      <audio
        :src="`https://music.163.com/song/media/outer/url?id=${$root.musicStore.musicID}.mp3`"
        autoplay
        @timeupdate="timeUpdate"
        @pause="timeUpdate"
        @play="play"
        ref="audio"
        @ended="nextSong"
      ></audio>
      <!-- <ul>
        <li v-for="m in $root.musicStore.musicList" :key="m.id"
        :style="{color:m.id==$root.musicStore.musicID?'red':''}">
          {{m.name}}
        </li>
      </ul> -->

      <div class="playBar" v-if="$root.musicStore.musicID">
        <i ref="randImg"
          ><template v-if="$root.musicStore.currentMusic.picUrl"
            ><img :src="$root.musicStore.currentMusic.picUrl"
          /></template>
          <template v-if="$root.musicStore.currentMusic.al"
            ><img :src="$root.musicStore.currentMusic.al.picUrl"
          /></template>
          <template v-if="$root.musicStore.currentMusic.artists"
            ><img :src="$root.musicStore.currentMusic.artists[0].img1v1Url"
          /></template>
        </i>
        <i @click="isFullPage = true"
          >{{ $root.musicStore.currentMusic.name }}
          <span>
            -
            <template v-if="$root.musicStore.currentMusic.song">{{
              $root.musicStore.currentMusic.song.artists[0].name
            }}</template
            ><template v-if="$root.musicStore.currentMusic.artists"
              ><span
                v-html="$root.musicStore.currentMusic.artists[0].name"
              ></span
            ></template>
            <template v-if="$root.musicStore.currentMusic.ar">
              {{ $root.musicStore.currentMusic.ar[0].name }}
            </template>
          </span>
        </i>
        <i>
          <canvas
            @click="changePlay"
            ref="processBtn"
            height="100"
            width="100"
          ></canvas>
        </i>
      </div>
      <transition enter-active-class="animate__animated animate__slideInUp">
        <!-- 全屏播放器界面 -->
        <div class="fullPage" v-show="isFullPage">
          <!-- 播放界面元素 -->
          <div class="fullPageContext">
            <p @click="isFullPage = false">
              <span class="iconfont icon-huabanfuben"></span>
            </p>
            <h3>
              {{ $root.musicStore.currentMusic.name }}
            </h3>
            <h3>
              <template v-if="$root.musicStore.currentMusic.song">
                {{ $root.musicStore.currentMusic.song.artists[0].name }}
              </template>
              <template v-if="$root.musicStore.currentMusic.artists">
                {{ $root.musicStore.currentMusic.artists[0].name }}
              </template>
              <template v-if="$root.musicStore.currentMusic.ar">
                {{ $root.musicStore.currentMusic.ar[0].name }}
              </template>
            </h3>
            <div ref="songImg" class="songImg">
              <template v-if="$root.musicStore.currentMusic.picUrl"
                ><img :src="$root.musicStore.currentMusic.picUrl"
              /></template>
              <template v-if="$root.musicStore.currentMusic.al"
                ><img :src="$root.musicStore.currentMusic.al.picUrl"
              /></template>
              <template v-if="$root.musicStore.currentMusic.artists"
                ><img :src="$root.musicStore.currentMusic.artists[0].img1v1Url"
              /></template>
            </div>
            <!-- 歌词 -->
            <div class="lyric" v-if="$root.lyric">
              <div v-if="$root.islyric">
                <ul
                  v-if="$root.lyric"
                  :style="{
                    transform: `translateY(-${moveTop - 40}px)`,
                  }"
                >
                  <li
                    ref="lyricLi"
                    v-for="(l, index) in $root.lyric"
                    :key="index"
                    :class="{ active: Index == index }"
                  >
                    {{ l.lyric }}
                  </li>
                </ul>
              </div>
              <div class="no_lyric_view" v-if="!$root.islyric">
                <span>暂无更多歌词...</span>
              </div>
            </div>

            <div class="control">
              <!-- 倍速/音量调节 -->
              <div class="controlOther">
                <div class="changeSpeed">
                  <span
                    class="myspeed iconfont icon-beisu3"
                    @click="show = !show"
                  ></span>
                  <div class="playSpeed" v-show="show">
                    <span
                      class="iconfont icon-beisu2"
                      @click="changeSpeed(1)"
                    ></span>
                    <span
                      class="iconfont icon-beisu1"
                      @click="changeSpeed(1.5)"
                    ></span>
                    <span
                      class="iconfont icon-beisu"
                      @click="changeSpeed(2)"
                    ></span>
                  </div>
                </div>

                <!-- 音量按钮 -->
                <div class="volume">
                  <span
                    v-show="hasVol"
                    class="yl iconfont icon-yinliang"
                    @click="showVoBar = !showVoBar"
                  ></span>
                  <span
                    v-show="!hasVol"
                    @click="showVoBar = !showVoBar"
                    class="yl iconfont icon-yinliangjingyinheix"
                  ></span>
                  <van-slider
                    bar-height="8px"
                    button-size="16px"
                    @change="showVoBar = !showVoBar"
                    vertical
                    class="volSlider"
                    v-model="value"
                    @input="changeVo"
                    v-show="showVoBar"
                    active-color="rgb(255,208,0)"
                  ></van-slider>
                </div>
              </div>

              <!-- 播放进度条 -->
              <div class="progress">
                <input
                  type="range"
                  min="0"
                  :max="duration"
                  :value="currentTime"
                  @change="changeTime"
                />
                <i
                  :style="{
                    width: `${(currentTime / duration) * 80}vw`,
                  }"
                ></i>
              </div>

              <!-- 播放器控件 -->
              <div class="controlBar">
                <span
                  class="iconfont icon-hanhan-01-01"
                  v-show="order"
                  @click="changMode"
                ></span>
                <span
                  class="iconfont icon-suiji"
                  v-show="!order"
                  @click="changMode"
                ></span>
                <span
                  class="iconfont icon-shangyishoushangyige"
                  @click="prevSong"
                ></span>
                <span
                  @click="changePlay"
                  v-show="isPlay"
                  class="iconfont icon-zanting"
                ></span>
                <span
                  @click="changePlay"
                  v-show="!isPlay"
                  class="iconfont icon-lianhe11"
                ></span>
                <span
                  @click="nextSong"
                  class="iconfont icon-xiayigexiayishou"
                ></span>
                <span
                  class="iconfont icon-bofangliebiao"
                  @click="showPlayList = !showPlayList"
                ></span>
              </div>
            </div>

            <!-- 播放列表 -->
            <van-popup
              class="playList"
              v-model="showPlayList"
              position="top"
              round
              :safe-area-inset-top="true"
              :overlay="false"
            >
              <h4>当前播放({{ $root.musicStore.musicList.length }})</h4>
              <ul>
                <li
                  v-for="v in $root.musicStore.musicList"
                  :key="v.id"
                  :style="{
                    color: v.id == $root.musicStore.musicID ? 'red' : '',
                  }"
                  @click="playMusic(v)"
                >
                  {{ v.name }}
                  <span
                    >-<template v-if="v.song">
                      {{ v.song.artists[0].name }}
                    </template>
                    <template v-if="v.artists">
                      {{ v.artists[0].name }}
                    </template>
                    <template v-if="v.ar">
                      {{ v.ar[0].name }}
                    </template></span
                  >
                  <i
                    class="delete iconfont icon-delete"
                    @click.stop="deleSong(v.id)"
                  ></i>
                </li>
              </ul>
            </van-popup>
          </div>
        </div>
      </transition>
    </div>
  </transition>
</template>

<script>
//按需引入 - 局部组件使用  需要在components下面按规定注册组件
// import { Popup } from "vant";
import { Toast } from "vant";
export default {
  name: "Play",
  data() {
    return {
      hasVol: true,
      showVoBar: false,
      isPlay: true,
      isFullPage: false,
      duration: 0,
      currentTime: 0,
      showPlayList: false,
      moveTop: 0,
      Index: 0,
      // playMode: "order",
      order: true, //用来标志是否为顺序播放
      show: false,
      value: 50, //van-slide滑块进度条value值
    };
  },
  created() {
    console.log(this.$root.musicStore.currentMusic);
  },
  components: {},
  methods: {
    //改变音量时触发
    changeVo() {
      // console.log('===触发了改变音量函数===');
      // console.log(this.value/100);
      this.$refs.audio.volume = (this.value / 100).toFixed(1);
      if (this.$refs.audio.volume == 0) {
        console.log("静音啦");
        this.hasVol = false;
      } else {
        this.hasVol = true;
      }
    },

    //改变播放速度e
    changeSpeed(spe) {
      // console.log(spe);
      var current = this.currentTime;
      this.$refs.audio.defaultPlaybackRate = spe; //跟playbackRate的区别
      this.$refs.audio.load();
      this.$refs.audio.currentTime = current;
      this.show = false;
      Toast.success(spe + "倍速");
    },

    // 删除播放列表某一首歌
    deleSong(id) {
      //循环当前播放列表，得到列表中每一项数据的索引i
      for (let i in this.$root.musicStore.musicList) {
        // console.log(this.$root.musicStore.musicList[i]);
        //找到我点击的那一首歌的id
        if (this.$root.musicStore.musicList[i].id == id) {
          //判断如果这个id是我正在播放的音乐的id(要删除当前播放的这首歌)
          if (id == this.$root.musicStore.musicID) {
            this.$root.musicStore.musicList.splice(i, 1);
            if (this.$root.musicStore.musicList.length == 0) {
              Toast.success("播放列表为空");
              //列表为空了，关闭遮罩层
              this.showPlayList = false;
              //退出全屏播放画面
              this.isFullPage = false;
              //把播放器也隐藏掉
              this.$root.musicStore.musicID = null;
              return;
            }
            //删除了当前播放的这首歌，播放下一首歌
            this.nextSong();
            break;
          } else {
            this.$root.musicStore.musicList.splice(i, 1);
          }
        }
      }
    },

    //改变列表播放模式 顺序/循环
    changMode() {
      this.order = !this.order;
      if (this.order) {
        // this.playMode = "order";
        Toast.success("顺序播放");
      } else {
        // this.playMode = "random";
        Toast.success("随机播放");
      }
      // console.log(this.playMode);
    },

    //点击播放列表中的歌曲的时候触发  ---  播放音乐
    playMusic(item) {
      this.$root.musicStore.musicID = item.id;
      this.$root.musicStore.currentMusic = item;
    },

    //改变音乐
    changeSong() {
      let currentIndex = 0;
      let musicList = this.$root.musicStore.musicList;
      if (!this.order) {
        return parseInt(Math.random() * musicList.length);
      } else {
        for (let i in musicList) {
          //循环所有播放列表，找到当前播放音乐的下标
          if (musicList[i].id === this.$root.musicStore.musicID) {
            currentIndex = i;
            break;
          }
        }
      }
      return currentIndex;
    },

    //上一首音乐
    prevSong() {
      let currentIndex = this.changeSong();
      let musicList = this.$root.musicStore.musicList;
      currentIndex--; //找到上一曲
      if (currentIndex < 0) {
        //如果上一曲下标为负，上一曲就是最后一曲
        currentIndex = musicList.length - 1;
      }
      //改变当前播放音乐的信息
      this.$root.musicStore.musicID = musicList[currentIndex].id;
      this.$root.musicStore.currentMusic = musicList[currentIndex]; //改变当前播放音乐的信息
    },

    //下一首音乐
    nextSong() {
      let currentIndex = this.changeSong();
      let musicList = this.$root.musicStore.musicList;
      currentIndex++; //下一曲
      if (currentIndex >= musicList.length) {
        //如果下一曲大于等于整个列表长度，回到第一曲
        currentIndex = 0;
      }
      //改变当前播放音乐的信息
      this.$root.musicStore.musicID = musicList[currentIndex].id;
      this.$root.musicStore.currentMusic = musicList[currentIndex]; //改变当前播放音乐的信息
    },

    pause(event) {
      //暂停事件
      this.isPlay = true;
      this.changePlay(); //改变状态及动画
      this.timeUpdate(event); //改变canvas里面的播放暂停状态
    },

    play(event) {
      //播放事件
      this.isPlay = false;
      this.changePlay();
      this.timeUpdate(event);
    },

    changeTime(event) {
      let time = event.target.value;
      this.currentTime = time;
      this.$refs.audio.currentTime = time;
    },

    changePlay() {
      let audio = this.$refs.audio;
      let randImg = this.$refs.randImg;
      let songImg = null;
      if (this.isFullPage) {
        //判断只有全屏的时候才有里面的旋转图片
        songImg = this.$refs.songImg;
      }
      if (this.isPlay) {
        audio.pause();
        this.isPlay = false;
        randImg.style.animationPlayState = "paused";
        if (this.isFullPage) {
          songImg.style.animationPlayState = "paused";
        }
      } else {
        audio.play();
        this.isPlay = true;
        randImg.style.animationPlayState = "running";
        if (this.isFullPage) songImg.style.animationPlayState = "running";
      }
    },

    timeUpdate(event) {
      let audio = event.target; //获取audio元素
      let currentTime = audio.currentTime; //当前播放时间
      let duration = audio.duration; //获取音频的总时长
      // console.log(currentTime,duration);
      this.currentTime = currentTime;
      this.duration = duration;
      if (this.$root.musicStore.musicID) {
        this.drawCircle(currentTime, duration);
        for (var i = 0; i < this.$root.lyric.length; i++) {
          if (i >= this.$root.lyric.length - 1) {
            //循环到最后一条的,不需要和下一条匹配 直接显示为最后一条高亮
            this.Index = i;
            break;
          }

          if (
            currentTime >= this.$root.lyric[i].time &&
            currentTime < this.$root.lyric[i + 1].time
          ) {
            if (i > 0) {
              //获取当前播放歌词上一条歌词距离父元素上面的距离.
              this.moveTop = this.$refs.lyricLi[i - 1].offsetTop; // console.log(i,this.$refs.lyricLi[i-1].offsetTop);
            }
            this.Index = i;
            break;
          }
        }
      }
    },

    drawCircle(currentTime, duration) {
      let canvas = this.$refs.processBtn.getContext("2d"); //画布
      canvas.clearRect(0, 0, 100, 100);
      canvas.beginPath();
      canvas.strokeStyle = "rgb(233, 225, 225)";
      canvas.lineWidth = 10;
      canvas.arc(50, 50, 40, 0, 2 * Math.PI);
      canvas.stroke();
      canvas.closePath();

      canvas.beginPath();
      canvas.strokeStyle = "rgb(255, 208, 0)";
      canvas.lineWidth = 10;
      canvas.arc(
        50,
        50,
        40,
        0,
        2 * Math.PI * parseFloat(currentTime / duration)
      );
      canvas.stroke();
      canvas.closePath();

      canvas.beginPath();
      let img = new Image();
      img.src =
        "";
      if (this.isPlay) {
        img.src =
          "";
      }
      canvas.drawImage(img, 30, 30, 40, 40);
      canvas.closePath();
    },
  },
  //按需引入 - 局部组件使用的固定格式
  // components: {
  //   [Popup.name]: Popup,
  // },
};
</script>

<style lang="less" scoped>
.player {
  position: fixed;
  z-index: 9;
  bottom: 0px;
  background:rgb(27, 27, 27);
  width: 100%;
  audio {
    height: 55px;
    width: 300px;
  }
  .playBar {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0px 10px;
    i {
      &:first-of-type {
        position: relative;
        top: -1vw;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        overflow: hidden;
        animation: randImg 6s linear infinite;
        border: 3px solid rgb(255,208,0);
        img {
          width: 60px;
          height: 60px;
          border-radius: 50%;
        }
      }
      &:nth-of-type(2) {
        margin-left: 3vw;
        font-size: 16px;
        flex: 1;
        text-align: center;
        font-style: normal;
        line-height: 50px;
        word-break: keep-all;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: white;
        text-shadow: 1px 1px black;
        span {
          font-size: 12px;
          color: rgb(212, 211, 187);
        }
      }
      &:nth-of-type(3) {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        canvas {
          width: 50px;
          height: 50px;
        }
      }
    }
  }
}

// 全屏播放页面
.fullPage {
  padding: 1vw;
  width: 100vw;
  height: 100vh;
  position: relative;

  //全屏内容
  .fullPageContext {
    width: 100vw;
    height: 100vh;
    p:first-of-type {
      span {
        font-size: 40px;
        color: white;
      }
    }
    h3 {
      text-align: center;
      font-weight: bolder;
      font-size: 17px;
      color: white;
    }
    .songImg {
      width: 35vw;
      height: 35vw;
      border-radius: 50%;
      animation: randImg 6s linear infinite;
      margin: 5vh auto;
      box-shadow: 0px 0px 5px 20px rgb(75, 65, 65);
      img {
        width: 35vw;
        height: 35vw;
        border-radius: 50%;
      }
    }

    //歌词
    .lyric {
      height: 30vh;
      overflow: hidden;
      text-align: center;
      color: white;
      text-shadow: 0 0 0.2em black;
      font-size: 18px;
      text-shadow: 1px 1px 2px #000000;
      ul{
        transition: all 1s;
      }
      li {
        &.active {
          font-size: 22px;
          color: rgb(255, 208, 0);
          text-shadow: 1px 1px 3px black;
        }
      }
    }

    // 控制按钮区域
    .control {
      color: white;
      width: 100vw;
      position: absolute;
      bottom: 40px;
      display: flex;
      height: 20vh;
      justify-content:space-between;
      flex-direction: column;
      //调节倍速/音量
      .controlOther {
        display: flex;
        width: 80vw;
        margin: 0px auto;
        justify-content: space-around;

        //倍速
        .changeSpeed {
          position: relative;
          span.myspeed {
            font-size: 40px;
          }
          .iconfont {
            font-size: 30px;
          }
          .playSpeed {
            position: absolute;
            display: flex;
            flex-direction: column-reverse;
            top: -30px;
            left: -30px;
            span {
              flex: 1;
            }
          }
        }

        //音量
        .volume {
          position: relative;
          .yl {
            font-size: 32px;
          }
          .volSlider {
            position: absolute;
            bottom: -1vw;
            right: -10vw;
            height: 70px;
          }
        }
      }

      //进度条
      .progress {
        width: 80vw;
        margin: 0 auto;
        position: relative;
        input {
          appearance: none;
          -webkit-appearance: none;
          width: 100%;
          background: transparent;
          position: relative;
          &::-webkit-slider-thumb {
            //控制滑头
            appearance: none;
            -webkit-appearance: none;
            width: 10px;
            height: 10px;
            background:rgb(255, 208, 0);
            border-radius: 50%;
            margin-top: -3px;
          }
          &::-webkit-slider-runnable-track {
            //控制滑槽
            appearance: none;
            -webkit-appearance: none;
            background: rgb(235, 229, 229);
            height: 4px;
            border-radius: 3px;
            box-shadow: 0.3px 0.3px rgba(255, 255, 255, 0.3);
          }
        }
        i {
          position: absolute;
          height: 4px;
          background: rgb(255, 208, 0);
          left: 0px;
          top: 10px;
          border-top-left-radius: 3px;
          border-bottom-left-radius: 3px;
        }
      }

      // 主要播放控件
      .controlBar {
        color: white;
        width: 80%;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        span {
          font-size: 35px;
        }
      }
    }

    // 播放列表
    .playList {
      top: 10vh;
      overflow-y: auto;
      max-height: 40vh;
      border-radius: 8px;
      background: rgba(62, 56, 65, 0.9);
      h4 {
        font-size: 18px;
        color: white;
        // position: absolute;
        // top: 0px;
        // left: 0px;
      }
      ul {
        overflow: auto;
        width: 100vw;
        color: rgb(145, 128, 108);
        line-height: 25px;
        text-indent: 10px;
        margin-top: 10px;
        li {
          padding-right: 15vw;
          word-break: keep-all;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          margin: 1vw 0;
          font-size: 20px;
          position: relative;
          span {
            color: rgb(116, 111, 111);
            font-size: 12px;
          }
          .delete {
            position: absolute;
            color: rgb(101, 112, 122);
            right: 2vw;
          }
        }
      }
    }
  }
}
@keyframes randImg {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>
